<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<!-- 编辑 -->
	<view class="edit-box">
		<view class="edit-item flex-row-center">
			<text class="edit-name">头像</text>
			<view class="edit-content flex-row-center" @click="uploadImg">
				<image :src="clerkInfo.avatar" v-if="clerkInfo.avatar" @click.stop="viewImg(clerkInfo.avatar)"
					class="ava" mode="aspectFill">
				</image>
				<up-icon name="arrow-right" color="#CDCECE" size="28rpx"></up-icon>
			</view>
		</view>
		<view class="edit-item flex-row-center">
			<text class="edit-name">昵称</text>
			<view class="edit-content">
				<up-input border="none" inputAlign="right" placeholderClass="placeholderClass" fontSize="26rpx"
					color="#616365" placeholder="请输入昵称" v-model="value2"></up-input>
			</view>
		</view>
		<view class="edit-item flex-row-center">
			<text class="edit-name">发布门店组队权限</text>
			<view class="edit-content">
				<up-switch v-model="value" activeColor="#60D4C1" loading></up-switch>
			</view>
		</view>
		<view class="edit-item flex-row-center">
			<text class="edit-name">核销权限</text>
			<view class="edit-content">
				<up-switch v-model="value" activeColor="#60D4C1" loading></up-switch>
			</view>
		</view>
		<view class="edit-btn">
			<up-button type="primary" color="linear-gradient(to right, #5ECFC1,#75CE93)" shape="circle"
				text="确认修改"></up-button>
		</view>
	</view>
	<!-- 新增 -->
	<view class="add-clerk">

	</view>
</template>

<script setup>
	const clerkId = ref(null);
	const value = ref(true);
	const value2 = ref('');
	const clerkInfo = ref({
		avatar: '../../static/logo.png'
	});
	onLoad((option) => {
		if (option && option.id) {
			clerkId.value = option.id;
			uni.setNavigationBarTitle({
				title: '店员编辑'
			});
		}
	})
	const viewImg = (url) => { //预览图片
		previewImg([url]);
	}
	const uploadImg = () => { //上传图片
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: [], //从相册选择
			success: async (res) => {
				// console.log(res.tempFilePaths[0]);
				uni.showLoading({
					title: '上传中'
				})
				const result = await $Api.uploadFile.uploadFilePromise(res.tempFilePaths[0])
				if (result.code == '1') {
					setTimeout(() => {
						uni.hideLoading();
						clerkInfo.value.avatar = result.data.fullurl;
						console.log('clerkInfo.avatar ', clerkInfo.value.avatar);
					}, 600)
				} else {
					uni.hideLoading();
					uni.$u.toast(res.msg);
				}
			}
		});

	}
</script>


<style lang="scss" scoped>
	.edit-box {
		width: 100%;
		box-sizing: border-box;
		margin-top: 24rpx;
		background-color: #222528;
		padding: 18rpx 34rpx;

		.edit-item {
			justify-content: space-between;
			min-height: 144rpx;
			padding: 18rpx 0;
			box-sizing: border-box;

			::v-deep.placeholderClass {
				color: #5B6868 !important;
				font-size: 26rpx;
				font-weight: 500;
			}

			&:not(:last-child) {
				border-bottom: 1rpx solid #666;
			}

			.edit-name {
				font-weight: 500;
				font-size: 28rpx;
				color: #CACBCB;
			}

			.ava {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				margin-right: 18rpx;
			}
		}

		.edit-content {}

		.edit-btn {
			margin: 0 auto;
			margin-top: 120rpx;
			width: 220rpx;
		}
	}
</style>